<script setup>
import { defineOptions } from 'vue'
defineOptions({
  name: 'indexStatistics',
})
</script>
<template>
  <div class="block statistics">
    <header>
      <h1>2025年云南旅游统计</h1>
    </header>
    <div class="wai">
      <div class="num">
        <div class="panel bar">
          <h2><i>2019-2021年旅游人次</i></h2>
          <div id="num1" class="chart"></div>
        </div>
        <div class="panel line">
          <h2><i>2021年各市国庆接待人次</i></h2>
          <div id="num2" class="chart"></div>
        </div>
        <div class="panel pie">
          <h2><i>2021年各市GDP</i></h2>
          <div id="num3" class="chart"></div>
        </div>
      </div>
      <div class="num">
        <div id="zhong" class="panel">
          <h2><i>旅游地图</i></h2>
          <div id="num7" class="chart"></div>
        </div>
      </div>
      <div class="num">
        <div class="panel bar1">
          <h2><i>云南和四川各方面评价</i></h2>
          <div id="num4" class="chart"></div>
        </div>
        <div class="panel line1">
          <h2><i>旅游各年龄段男女消费</i></h2>
          <div id="num5" class="chart"></div>
        </div>
        <div class="panel pie1">
          <h2><i>云南少数民族人口数</i></h2>
          <div id="num6" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@font-face {
  font-family: 'electronicFont';
  src: url('../../../assets/font/DS-DIGIT.TTF');
}
.statistics {
  box-sizing: border-box;
  font-family: 'electronicFont';
  header {
    height: 10%;
    background: url('../../../assets/statistics/title.png') no-repeat;
    background-size: 100% 100%;
    h1 {
      font-size: 3rem;
      color: #00ccff;
      text-align: center;
      line-height: 4rem;
    }
  }
  .wai {
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0.125rem 0.125rem 0;
    display: flex;
    .num {
      flex: 3;
      .panel {
        position: relative;
        height: 19rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: rgba(255, 255, 255, 0.04) url('../../../assets/statistics/line.png');
        // padding: 0 0.1875rem 0.5rem;
        margin-bottom: 0.1875rem;
        .chartDiv {
          position: absolute !important;
          top: 30%;
          left: 0;
        }
        .chart {
          height: 17rem;
        }
        ::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: '';
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }
        ::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: '';
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
        h2 {
          position: absolute;
          margin: 0;
          height: 2rem;
          left: 0;
          right: 0;
          line-height: 2rem;
          color: #00ccff;
          font-size: 1.5rem;
          font-weight: 400;
          background: url('../../../assets/statistics/mintitle_1.png');
          background-size: contain;
          background-size: cover;
        }
      }
    }
    .num:nth-child(2) {
      flex: 5;
      margin: 0 0.125rem 0.1875rem;
      overflow: hidden;
    }
    #zhong {
      height: 57.5rem;
      text-align: center;
    }
  }
  // .panel
}
</style>
